<template>
    <div class="iclassify flexv">
        <!-- 头部 -->
        <div class="top_search">
            <div class="top_s flex">
                <div class="back_btn flex" @click="backBtn">
                    <img src="@/assets/back-ico.png" alt="">
                </div>

                <div class="flex1 flex search_area" @click="toSeach">
                    <img src="@/assets/nav_search.png" class="search_ico" alt="">
                    <span class="flex1">请输入您想要搜索的商品</span>
                </div>
            </div>
        </div>

        <div class="flex">
            <div class="left_menu_box flex">
                <div class="left_menus flexv">
                    <div class="left_menu tc" :class="firstMenu == 1 ? 'on' : ''" @click="changeFirst(1)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 2 ? 'on' : ''" @click="changeFirst(2)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 3 ? 'on' : ''" @click="changeFirst(3)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 4 ? 'on' : ''" @click="changeFirst(4)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 5 ? 'on' : ''" @click="changeFirst(5)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 6 ? 'on' : ''" @click="changeFirst(6)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 7 ? 'on' : ''" @click="changeFirst(7)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 8 ? 'on' : ''" @click="changeFirst(8)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 9 ? 'on' : ''" @click="changeFirst(9)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 10 ? 'on' : ''" @click="changeFirst(10)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 11 ? 'on' : ''" @click="changeFirst(11)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 12 ? 'on' : ''" @click="changeFirst(12)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 13 ? 'on' : ''" @click="changeFirst(13)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 14 ? 'on' : ''" @click="changeFirst(14)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 15 ? 'on' : ''" @click="changeFirst(15)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 16 ? 'on' : ''" @click="changeFirst(16)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 17 ? 'on' : ''" @click="changeFirst(17)">景点门票</div>
                    <div class="left_menu tc" :class="firstMenu == 18 ? 'on' : ''" @click="changeFirst(18)">景点门票</div>
                </div>
            </div>

            <div class="right_area flex1 flexv">

                <div class="right_menu_box flexv">
                    <div class="menu_title">南昌</div>
                    <div class="right_menus flex-wrap">
                        <div class="right_menu flexv flexc">
                            <img src="@/assets/_icon_exchangerecords@2x.png" alt="">
                            <span>太阳谷</span>
                        </div>
                        <div class="right_menu flexv flexc">
                            <img src="@/assets/_icon_exchangerecords@2x.png" alt="">
                            <span>太阳谷</span>
                        </div>
                        <div class="right_menu flexv flexc">
                            <img src="@/assets/_icon_exchangerecords@2x.png" alt="">
                            <span>太阳谷</span>
                        </div>
                        <div class="right_menu flexv flexc">
                            <img src="@/assets/_icon_exchangerecords@2x.png" alt="">
                            <span>太阳谷</span>
                        </div>
                        <div class="right_menu flexv flexc">
                            <img src="@/assets/_icon_exchangerecords@2x.png" alt="">
                            <span>太阳谷</span>
                        </div>
                    </div>
                </div>
                <div class="right_menu_box flexv">
                    <div class="menu_title">南昌</div>
                    <div class="right_menus flex-wrap">
                        <div class="right_menu flexv flexc">
                            <img src="@/assets/_icon_exchangerecords@2x.png" alt="">
                            <span>太阳谷</span>
                        </div>
                        <div class="right_menu flexv flexc">
                            <img src="@/assets/_icon_exchangerecords@2x.png" alt="">
                            <span>太阳谷</span>
                        </div>
                        <div class="right_menu flexv flexc">
                            <img src="@/assets/_icon_exchangerecords@2x.png" alt="">
                            <span>太阳谷</span>
                        </div>
                        <div class="right_menu flexv flexc">
                            <img src="@/assets/_icon_exchangerecords@2x.png" alt="">
                            <span>太阳谷</span>
                        </div>
                        <div class="right_menu flexv flexc">
                            <img src="@/assets/_icon_exchangerecords@2x.png" alt="">
                            <span>太阳谷</span>
                        </div>
                    </div>
                </div>
                <div class="right_menu_box flexv">
                    <div class="menu_title">南昌</div>
                    <div class="right_menus flex-wrap">
                        <div class="right_menu flexv flexc">
                            <img src="@/assets/_icon_exchangerecords@2x.png" alt="">
                            <span>太阳谷</span>
                        </div>
                        <div class="right_menu flexv flexc">
                            <img src="@/assets/_icon_exchangerecords@2x.png" alt="">
                            <span>太阳谷</span>
                        </div>
                        <div class="right_menu flexv flexc">
                            <img src="@/assets/_icon_exchangerecords@2x.png" alt="">
                            <span>太阳谷</span>
                        </div>
                        <div class="right_menu flexv flexc">
                            <img src="@/assets/_icon_exchangerecords@2x.png" alt="">
                            <span>太阳谷</span>
                        </div>
                        <div class="right_menu flexv flexc">
                            <img src="@/assets/_icon_exchangerecords@2x.png" alt="">
                            <span>太阳谷</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <pub-foot index="index"></pub-foot>
    </div>
</template>
<script>
import Vue from 'vue';
import pubFoot from '@/components/foot';


export default {
    data(){
        return{
            firstMenu: 1, // 默认一级菜单
        }
    },
    components: {
        pubFoot,
    },
    created(){
    },
    methods: {
        // 返回
        backBtn(){
            this.$router.go(-1);
        },
        // 去搜索页
        toSeach(){
            this.$router.push('/search')
        },
        // 选择一级菜单
        changeFirst(id){
            this.firstMenu = id;
        },
    },
}
</script>
<style lang="less" scoped>
::-webkit-scrollbar{
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
}
.iclassify{
    min-height: 100vh;
    background-color: #fff;
    .tc{
        text-align: center;
    }
    .top_search{
        width: 100%;
        height: 0.88rem;
        .top_s{
            width: 100%;
            max-width: 750px;
            height: 0.88rem;
            margin: 0 auto;
            position: fixed;
            z-index: 100;
            top: 0;
            left: 0;
            right: 0;
            border-bottom: 1px solid #e9e9e9;
            background-color: #fff;
            .back_btn{
                width: 0.88rem;
                height: 0.88rem;
                img{
                    width: 0.2rem;
                    height: 0.36rem;
                    margin: auto;
                }
            }
            .search_area{
                height: 0.6rem;
                margin: auto 0.3rem auto 0;
                padding: 0 0.3rem;
                border-radius: 0.3rem;
                background-color: #f5f5f5;
                .search_ico{
                    width: 0.28rem;
                    height: 0.28rem;
                    margin: auto 0;
                }
                span{
                    margin-left: 0.2rem;
                    font-size: 0.26rem;
                    line-height: 0.6rem;
                    color: #999;
                }
            }
        }
    }
    // 左边菜单
    .left_menu_box{
        width: 2rem;
        height: calc(100vh - env(safe-area-inset-bottom) - 1.86rem);
        background-color: #f6f6f6;
        .left_menus{
            width: 100%;
            overflow-y: scroll;
            .left_menu{
                width: 100%;
                height: 0.9rem;
                border-left: 0.06rem solid transparent;
                font-size: 0.28rem;
                line-height: 0.9rem;
                color: #333;
            }
            .left_menu.on{
                color: #50AD22;
                border-left-color: #50AD22;
                background-color: #fff;
            }
        }
    }
    // 右边菜单
    .right_area{
        width: 100%;
        height: calc(100vh - env(safe-area-inset-bottom) - 1.86rem);
        overflow-y: scroll;
        .right_menu_box{
            width: 100%;
            .menu_title{
                height: 0.6rem;
                margin: 0.3rem auto 0.1rem;
                font-size: 0.3rem;
                line-height: 0.6rem;
                font-weight: bold;
                color: #666;
                position: relative;
            }
            .menu_title::before,.menu_title::after{
                content: "";
                width: 0.8rem;
                height: 1px;
                margin: auto 0;
                position: absolute;
                z-index: 1;
                top: 0;
                bottom: 0;
                background-color: #ddd;
            }
            .menu_title::before{
                left: -1rem;
            }
            .menu_title::after{
                right: -1rem;
            }
            .right_menus{
                margin: 0 0.3rem;
                box-shadow: 0 0.04rem 0.06rem 0 rgba(168,168,168,0.16);
                border-radius: 0.1rem;
                .right_menu{
                    width: 1.2rem;
                    margin: 0.2rem 0.2rem;
                    img{
                        width: 1.2rem;
                        height: 1.2rem;
                    }
                    span{
                        margin-top: 0.12rem;
                        font-size: 0.24rem;
                        line-height: 120%;
                        color: #333;
                    }
                }
            }
        }
        .right_menu_box:last-child{
            margin-bottom: 0.3rem;
        }
    }

}
</style>